<template>
	<div class="box">
		<div id="rongqi" ref="rongqi">
		<div class="clumb"></div>
		<div class="clumb"></div>
		<div class="clumb"></div>
		<div class="clumb"></div>
		<div class="clumb"></div>
		<div class="clumb"></div>
		<div class="clumb"></div>
		<div class="clumb"></div>
		<div class="clumb"></div>
		<div class="clumb"></div>
	</div>
	</div>
	
</template>

<script>
	export default {
		name: "v-waterfall",
		data() {
			return {
				imgArr: [
					require('@/assets/pubuImg/1.jpg'),
					require('@/assets/pubuImg/2.jpg'),
					require('@/assets/pubuImg/3.jpg'),
					require('@/assets/pubuImg/4.jpg'),
					require('@/assets/pubuImg/5.jpg'),
					require('@/assets/pubuImg/6.jpg'),
					require('@/assets/pubuImg/7.jpg'),
					require('@/assets/pubuImg/8.jpg'),
					require('@/assets/pubuImg/9.jpg'),
					require('@/assets/pubuImg/10.jpg'),
					require('@/assets/pubuImg/11.jpg'),
					require('@/assets/pubuImg/12.jpg'),
					require('@/assets/pubuImg/13.jpg'),
					require('@/assets/pubuImg/14.jpg'),
					require('@/assets/pubuImg/1.jpg'),
					require('@/assets/pubuImg/2.jpg'),
					require('@/assets/pubuImg/3.jpg'),
					require('@/assets/pubuImg/4.jpg'),
					require('@/assets/pubuImg/5.jpg'),
					require('@/assets/pubuImg/6.jpg'),
					require('@/assets/pubuImg/7.jpg'),
					require('@/assets/pubuImg/8.jpg'),
					require('@/assets/pubuImg/9.jpg'),
					require('@/assets/pubuImg/10.jpg'),
					require('@/assets/pubuImg/11.jpg'),
					require('@/assets/pubuImg/12.jpg'),
					require('@/assets/pubuImg/13.jpg'),
					require('@/assets/pubuImg/14.jpg'),



				],
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.loadImg()
				window.addEventListener('scroll', this.load)
			})
		},
		methods: {
			load(){
				var clumb = document.getElementsByClassName("clumb");
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var t = document.documentElement.clientHeight + scrollTop;
				//获取最短的列
				var index = this.getMinHeightIndex();
				var minHeight = clumb[index]?.offsetHeight;
				
				if( t > minHeight ){
					this.loadImg();
				}
			},
				loadImg(){
					var clumb = document.getElementsByClassName("clumb");
					var res =  this.imgArr
						var json = res;
						for (var i = 0; i < json.length; i++) {
							//创建图片标签
							var img = document.createElement("img");
							img.src = json[i];
							img.style="max-width:150px;margin-bottom:5px;border: 1px solid #ccc;padding:5px;border-radius: 15px;"
							//添加前五张图片按顺序添加到clumb序列中
							if(i < 5){
								clumb[i].appendChild(img);
							}else{
								//计算得到最短的这一列clumb下标
								var index = this.getMinHeightIndex();
								//每一次添加，会把图片追加到最短的这一列下面。
								clumb[index].appendChild(img);
							}
						}
					// })
				},
				getMinHeightIndex(){
					var clumb = document.getElementsByClassName("clumb");
					var minHeightIndex = 0;
					var minHeightEle = clumb[0]?.offsetHeight;
					for (var i = 0; i < clumb.length; i++) {
						if(minHeightEle > clumb[i]?.offsetHeight){
							minHeightEle = clumb[i]?.offsetHeight;
							minHeightIndex = i;
						}
					}
					return minHeightIndex;
				}
		},
		destroyed(){
			window.removeEventListener('scroll', this.load)
		}
	}
</script>

<style scoped>
	.box{
		width: 100%;
		display: flex;
		justify-content: center;
	}
	#rongqi{
		
		/* width: 100%; */
		margin: auto;
	}
	.clumb{
		max-width: 160px;
		float: left; 
	}
	
	.clumb img {
		max-width: 160px;
		border-radius: 15px;
	}
</style>
